@grayColor: #f5f7fa;
@borderColor: #dcdfe6;
@height: 38px;
@name: yc-cron-tabs;

.@{name} {
  border-bottom: 1px solid @borderColor;
  &__header {
    display: flex;
    height: @height;
    background-color: @grayColor;
    border-bottom: 1px solid @borderColor;
    box-sizing: border-box;
  }
  &__body {
    background-color: #f9fafc;
    & > * {
      display: none;
    }
    & > .is-active {
      display: block;
    }
  }
  &.is-align-height {
    .@{name}__body {
      white-space: nowrap;
      overflow: hidden;
      & > :not(:first-child) {
        margin-left: -100%;
      }
      & > * {
        vertical-align: top;
        visibility: hidden;
        display: inline-block;
        width: 100%;
      }
      & > .is-active {
        visibility: visible;
      }
    }
  }
  &__item {
    position: relative;
    top: 0px;
    left: -1px;
    height: @height;
    line-height: @height;
    padding: 0 20px;
    font-size: 14px;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid transparent;
    transition: 0.3s;
  
    color: #909399;
    &.is-active {
      border-left-color: @borderColor;
      border-right-color: @borderColor;
      border-bottom-color: #fff;
      color: var(--primary-color);
      background-color: #fff;
    }
    &:not(.is-active) {
      border-bottom: 1px solid transparent;
    }
    &:hover {
      color: var(--primary-color);
    }
  }
}